@import '../common/style/base.less';

@side-bar-color: var(--td-side-bar-color, @text-color-primary);
@side-bar-font: var(--td-side-bar-font, @font-body-large);
@side-bar-item-height: var(--td-side-bar-item-height, auto);
@side-bar-bg-color: var(--td-side-bar-bg-color, @bg-color-secondarycontainer);
@side-bar-disabled-color: var(--td-side-bar-disabled-color, @text-color-disabled);
@side-bar-active-color: var(--td-side-bar-active-color, @brand-color);
@side-bar-border-radius: var(--td-side-bar-border-radius, 18rpx);
@side-bar-icon-size: var(--td-side-bar-icon-size, 40rpx);

.@{prefix}-side-bar-item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 32rpx;
  font: @side-bar-font;
  color: @side-bar-color;
  background: @side-bar-bg-color;
  min-height: @side-bar-item-height;
  box-sizing: border-box;
  white-space: wrap;

  &--active {
    font-weight: 600;
    background: @bg-color-container;
    color: @side-bar-active-color;

    --td-badge-content-text-color: @side-bar-active-color;
  }

  &__icon {
    font-size: @side-bar-icon-size;
    margin-right: 4rpx;
  }

  &__prefix,
  &__suffix {
    z-index: 1;
    position: absolute;
    right: 0;
    width: 100%;
    height: calc(@side-bar-border-radius * 2);
    background: @bg-color-container;
    pointer-events: none;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: @side-bar-bg-color;
    }
  }

  &__prefix {
    top: calc(@side-bar-border-radius * -2);

    &::after {
      border-bottom-right-radius: @side-bar-border-radius;
    }
  }

  &__suffix {
    bottom: calc(@side-bar-border-radius * -2);

    &::after {
      border-top-right-radius: @side-bar-border-radius;
    }
  }

  &--disabled {
    color: @side-bar-disabled-color;

    --td-badge-content-text-color: @side-bar-disabled-color;
  }

  &__line {
    width: 6rpx;
    height: 28rpx;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: @side-bar-active-color;
    border-radius: 8rpx;
  }
}
